<template>
	<view v-if="immigrationList.length != 0" class="root">
		<view class="blod" style="height: 100rpx; width: 90%; line-height: 100rpx; margin: 0 auto;">最新进度</view>
		<bar class="bar" :tip=tipBar :check="current" @changeCheck="changeCheck"></bar>


		<view class="body w8" :class="tipBar[current] == '#FF6B6B'?'red-box':(tipBar[current] == '#63C3FF'?'blue-box':'')"
		 style="box-shadow: 0 0 15rpx #D1D1D1;">
			<view v-if="current == 0" class="w9">
				<view style="flex-wrap: wrap;" class="flex w10 body-item">
					<view style="line-height: 70rpx;" class="blod flex2">姓名:</view>
					<butt class="flex3" :content="result.procData.sbName || '暂无申请'"></butt>
				</view>
				<view style="flex-wrap: wrap;" class="flex w10 body-item">
					<view style="line-height: 70rpx;" class="blod flex2">申请时间:</view>
					<view style="line-height: 70rpx; color: #888888;" class="flex3">{{result.processStep.apply.handleTime|| '暂无申请'}}</view>
				</view>
			</view>

			<view v-else-if="current == 1" class="w9">
				<view style="flex-wrap: wrap;" class="flex w10 body-item">
					<view style="line-height: 70rpx;" class="blod flex2">审核人:</view>
					<view style="line-height: 70rpx; color: #888888;" class="flex3">{{result.processStep.chu.taskName|| '暂无申请'}}</view>
				</view>
				<view style="flex-wrap: wrap;" class="flex w10 body-item">
					<view style="line-height: 70rpx;" class="blod flex3">审核人联系方式:</view>
					<view style="line-height: 70rpx; color: #888888;" class="flex3">{{result.processStep.chu.auditPhone|| '暂无申请'}}</view>
				</view>
				<view style="flex-wrap: wrap;" class="flex w10 body-item">
					<view style="line-height: 70rpx;" class="blod flex2">状态:</view>
					<butt class="flex3" :bgc="tipBar[current]" width="300" :content="getState(result.processStep.chu.state|| '暂无申请')"></butt>
				</view>
				<view v-if="result.processStep.chu.state != 1" style="flex-wrap: wrap;" class="flex w10 body-item">
					<view style="line-height: 70rpx;" class="blod flex2">审核时间:</view>
					<view style="line-height: 70rpx; color: #888888;" class="flex3">{{result.processStep.chu.handleTime|| '暂无申请'}}</view>
				</view>
				<view v-if="result.processStep.chu.state == 3" style="flex-wrap: wrap;" class="flex w10 body-item">
					<view style="line-height: 70rpx;" class="blod flex2">错误信息:</view>
					<view style="line-height: 70rpx; color: #888888;" class="flex3">
						<view v-if="result.processStep.chu.handleOpinion.checkInfo.domicile">户籍地不符</view>
						<view v-if="result.processStep.chu.handleOpinion.checkInfo.bankCardMatch">银行账号未按规定提交</view>
						<view v-show="ttt(1,result.processStep.chu.handleOpinion.checkInfo.ma)">身份证正面照错误</view>
						<view v-show="ttt(2,result.processStep.chu.handleOpinion.checkInfo.ma)">身份证反面照错误</view>
						<view v-show="ttt(3,result.processStep.chu.handleOpinion.checkInfo.ma)">户口本照错误</view>
						<view v-show="ttt(4,result.processStep.chu.handleOpinion.checkInfo.ma)">身份证号错误</view>
					</view>
				</view>
				<view v-if="result.processStep.chu.state != 1" style="flex-wrap: wrap;" class="flex w10 body-item">
					<view style="line-height: 70rpx;" class="blod flex2">审核意见:</view>
					<view style="line-height: 70rpx; color: #888888;" class="flex3">
						{{result.processStep.chu.handleOpinion.opinion|| '暂无申请'}}
					</view>
				</view>
			</view>


			<view v-else-if="current == 2" class="w9">
				<view style="flex-wrap: wrap;" class="flex w10 body-item">
					<view style="line-height: 70rpx;" class="blod flex2">审核人:</view>
					<view style="line-height: 70rpx; color: #888888;" class="flex3">{{result.processStep.fu.taskName|| '暂无申请'}}</view>
				</view>
				<view style="flex-wrap: wrap;" class="flex w10 body-item">
					<view style="line-height: 70rpx;" class="blod flex3">审核人联系方式:</view>
					<view style="line-height: 70rpx; color: #888888;" class="flex3">{{result.processStep.fu.auditPhone|| '暂无申请'}}</view>
				</view>
				<view style="flex-wrap: wrap;" class="flex w10 body-item">
					<view style="line-height: 70rpx;" class="blod flex2">状态:</view>
					<butt class="flex3" :bgc="tipBar[current]" width="300" :content="getState(result.processStep.fu.state|| '暂无申请')"></butt>
				</view>
				<view v-if="result.processStep.fu.handleTime != null" style="flex-wrap: wrap;" class="flex w10 body-item">
					<view style="line-height: 70rpx;" class="blod flex2">审核时间:</view>
					<view style="line-height: 70rpx; color: #888888;" class="flex3">{{result.processStep.fu.handleTime|| '暂无申请'}}</view>
				</view>
				<view v-if="result.processStep.fu.handleOpinion != null && result.processStep.fu.state == 3" style="flex-wrap: wrap;"
				 class="flex w10 body-item">
					<view style="line-height: 70rpx;" class="blod flex2">错误信息:</view>
					<view style="line-height: 70rpx; color: #888888;" class="flex3">
						<view v-show="result.processStep.fu.handleOpinion.checkInfo.domicile">户籍地不符</view>
						<view v-show="result.processStep.fu.handleOpinion.checkInfo.bankCardMatch">银行账号未按规定提交</view>
						<view v-show="ttt(1,result.processStep.fu.handleOpinion.checkInfo.ma)">身份证正面照错误</view>
						<view v-show="ttt(2,result.processStep.fu.handleOpinion.checkInfo.ma)">身份证反面照错误</view>
						<view v-show="ttt(3,result.processStep.fu.handleOpinion.checkInfo.ma)">户口本照错误</view>
						<view v-show="ttt(4,result.processStep.fu.handleOpinion.checkInfo.ma)">身份证号错误</view>
					</view>
				</view>
				<view v-if="result.processStep.fu.handleOpinion != null" style="flex-wrap: wrap;" class="flex w10 body-item">
					<view style="line-height: 70rpx;" class="blod flex2">审核意见:</view>
					<view style="line-height: 70rpx; color: #888888;" class="flex3">{{result.processStep.fu.handleOpinion.opinion|| '暂无申请'}}</view>
				</view>
			</view>
		</view>
		<cross-line></cross-line>
		<view class="blod" style=" width: 90%;  margin: 0 auto;">历史申请</view>
		<cross-line style="width: 750rpx;"></cross-line>
		<view>
			<listItem @progress="changeProgress" :show="true" v-for="(item,index) in immigrationList" :level="3" :item="item"></listItem>
		</view>
	</view>

	<view v-else>
		<view class="text-center" style="width: 750rpx; height: 40vh;">
			<icon class="my-icon icon-load iconfont"></icon>
			<view style="margin-top: 50vh;" class="text-center blod">暂时没有最新记录！</view>
		</view>
	</view>

</template>
<script>
	import listItem from '../../../components/ui/list-item.vue'
	import outRecordListItem from '@/components/ui/page/emigration-list-item.vue'
	import crossLine from '@/components/ui/tg-cross-line.vue'
	import bar from "@/components/ui/tg-bar.vue"
	import butt from '@/components/ui/myButt.vue'
	export default {
		components: {
			bar,
			butt,
			crossLine,
			outRecordListItem,
			listItem
		},
		data() {
			return {
				// item: {
				// 	procData: {
				// 		nickName: '张三',
				// 		applyImmTime: '2020-10-10 23:25:17'
				// 	}
				// },
				result: {},
				current: 0,
				tipBar: ['#63C3FF', '#D1D1D1', '#D1D1D1'],
				immigrationList: [],
				show: []
			}
		},
		async onLoad() {
			try {
				var immigrationList = await this.$api.appProcessProcessInstanceList();
				this.immigrationList = immigrationList.data.result
				this.immigrationList.forEach(e => {
					e.procData = JSON.parse(e.procData)
				})
				console.log(this.immigrationList)

				var res = await this.$api.showLatestApplyUserProcess();
				this.result = res.data.result
				this.result.procData = JSON.parse(this.result.procData)

				this.result.processStep.chu.handleOpinion = JSON.parse(this.result.processStep.chu.handleOpinion)
				this.result.processStep.fu.handleOpinion = JSON.parse(this.result.processStep.fu.handleOpinion)
				console.log(this.result)
				switch (this.result.processStep.chu.state) {
					case 2:
						{
							this.current = 1;
							this.tipBar[1] = '#63C3FF';
							break;
						}
					case 1:
						{
							this.current = 1;
							this.tipBar[1] = '#D1D1D1';
							break;
						}
					case 3:
						{
							this.current = 1;
							this.tipBar[1] = '#FF6B6B';
							break;
						}
				}

				switch (this.result.processStep.fu.state) {
					case 2:
						{
							this.current = 2;
							this.tipBar[2] = '#63C3FF';
							break;
						}
					case 1:
						{
							this.tipBar[2] = '#D1D1D1';
							break;
						}
					case 3:
						{

							if (this.result.processStep.fu.handleTime != null) {
								this.current = 2;
								this.tipBar[2] = '#FF6B6B';
							} else {
								this.tipBar[2] = '#FF6B6B';
							}
							console.log(this.tipBar[2])
							break;
						}
				}

				// this.result.			
			} catch (e) {
				this.result = {
					"processId": "1336227596358127616",
					"currentNode": 1,
					"procData": {
						"processKey": "immigration",
						"processName": "暂无申请",
						"residence_photo": "http://192.168.78.107/group1/M00/00/0C/wKhOa1_POoaATUUiAABtNG10HHM647.jpg",
						"immigration_name": "暂无申请",
						"immigration_dept": "暂无申请",
						"immi_province": 0,
						"newAddress": "暂无申请",
						"bankType": "暂无申请",
						"bankNum": "暂无申请",
						"nickName": "暂无申请",
						"userPlace": "暂无申请",
						"cardNo": "暂无申请",
						"gender": "暂无申请",
						"phone": "暂无申请",
						"username": "暂无申请",
						"nation": "暂无申请",
						"applyImmTime": "暂无申请"
					},
					"processStep": {
						"apply": {
							"taskId": "1336227596819501056",
							"handleOpinion": '暂无申请',
							"handleTime": '暂无申请',
							"handleType": '暂无申请',
							"handleUserId": '暂无申请',
							"handleUserName": '暂无申请',
							"taskName": '暂无申请',
							"shouldUserId": "4610",
							"shouldUserName": '暂无申请',
							"state": 1
						},
						"chu": {
							"taskId": '暂无申请',
							"handleOpinion": '暂无申请',
							"handleTime": '暂无申请',
							"handleType": '暂无申请',
							"handleUserId": '暂无申请',
							"handleUserName": '暂无申请',
							"taskName": '暂无申请',
							"shouldUserId": '暂无申请',
							"shouldUserName": '暂无申请',
							"state": 1
						},
						"fu": {
							"taskId": '暂无申请',
							"handleOpinion": '暂无申请',
							"handleTime": '暂无申请',
							"handleType": '暂无申请',
							"handleUserId": '暂无申请',
							"handleUserName": '暂无申请',
							"taskName": '暂无申请',
							"shouldUserId": '暂无申请',
							"shouldUserName": '暂无申请',
							"state": 1
						}
					}
				}
			}
		},
		methods: {
			async changeProgress(e) {
				console.log(e)
				var res = await this.$api.userProcessInfo({
					"processKey": "glbt",
					"processId": e.item.processId
				})
				this.result = res.data.result;
				this.result.procData = JSON.parse(this.result.procData)
				this.result.processStep.chu.handleOpinion = JSON.parse(this.result.processStep.chu.handleOpinion)
				this.result.processStep.fu.handleOpinion = JSON.parse(this.result.processStep.fu.handleOpinion)
				console.log(this.result)
				switch (this.result.processStep.chu.state) {
					case 2:
						{
							this.current = 1;
							this.tipBar[1] = '#63C3FF';
							break;
						}
					case 1:
						{
							this.current = 1;
							this.tipBar[1] = '#D1D1D1';
							break;
						}
					case 3:
						{
							this.current = 1;
							this.tipBar[1] = '#FF6B6B';
							break;
						}
				}

				switch (this.result.processStep.fu.state) {
					case 2:
						{
							this.current = 2;
							this.tipBar[2] = '#63C3FF';
							break;
						}
					case 1:
						{
							this.tipBar[2] = '#D1D1D1';
							break;
						}
					case 3:
						{

							if (this.result.processStep.fu.handleTime != null) {
								this.current = 2;
								this.tipBar[2] = '#FF6B6B';
							} else {
								this.tipBar[2] = '#FF6B6B';
							}
							console.log(this.tipBar[2])
							break;
						}
				}
				
				console.log(this.tipBar)
			},
			ttt(item, arr) {
				console.log('方法执行了')
				if (true) {
					console.log(item)
				}
				return this.$utiltg.traverseArray(item, arr)
			},
			getState(state) {
				if (state == 2) {
					return '审核通过！'
				} else if (state == 1) {
					return '审核中'
				} else {
					return '审核未通过'
				}
			},
			changeCheck(e) {
				this.current = e.index;
				console.log(this.current)
			}
		}
	}
</script>
<style scoped>
	.my-icon {
		color: #888888;
		font-size: 100rpx;
		text-align: center;
		width: 750rpx;
		position: absolute;
		top: 40%;
		left: 0;
		animation: loding 2s;
		animation-iteration-count: infinite;
	}
	@keyframes loding {
		from {
			transform:rotate(0deg);
		}
	
		to {
			transform:rotate(360deg);
		}
	}
	.red-box {
		box-shadow: 0 0 15rpx #FF6B6B !important;
	}

	.blue-box {
		box-shadow: 0 0 15rpx #63C3FF !important;
	}



	.body-item::before {
		content: "";
		display: block;
		width: 750rpx;
		height: 30rpx;
	}



	.body {
		min-height: 500rpx;
		margin: 50rpx auto;
		border-radius: 15rpx;
		transition: box-shadow 0.5s, height 0.5s;
	}
</style>
